<template>
    <div class="home">
        <el-container>
            <el-header>
                <div v-if="isMobile()" style="margin-top: 12px; margin-left: 8px;" @click="toggleShow">
                    <el-icon size="24">
                        <Fold />
                    </el-icon>
                </div>
                <img @click="toindex" src="../assets/image/logo@2x.png" alt="" class="crmlogo" />
                <!-- <div class="tag" v-show="tags.length !== 0"> -->
                <!-- <div :class="{ tagitem: true, tagactive: tagsflag === index }" @click="totagpath(ele.path, index)"
            v-for="(ele, index) in tags" :key="index">
            {{ ele.name
            }}<el-icon @click.stop="handleClose(index)" class="icon">
              <Close />
            </el-icon>
          </div> -->
                <navView />
                <!-- <el-scrollbar>
          <div class="scrollbar-flex-content">
            <div :class="{ tagitem: true, tagactive: tagsflag === index }" @click="totagpath(ele.path, index)"
              v-for="(ele, index) in tags" :key="index">
              {{ ele.name
              }}<el-icon @click.stop="handleClose(index)" class="icon">
                <Close />
              </el-icon>
            </div>
          </div>
        </el-scrollbar> -->
                <!-- </div> -->
                <div class="adminmsg">
                    <!-- <img src="../assets/image/bell.png" alt="" /> -->
                    <el-popover placement="bottom" title="" :width="200" trigger="click" content="">
                        <div>
                            <ul>
                                <li class="header_msg" @click="changepassword">
                                    设置密码
                                </li>
                                <!-- <li class="header_msg" @click="tomsg">个人信息</li> -->
                                <li class="header_msg" @click="exit">
                                    退出登录
                                </li>
                            </ul>
                        </div>
                        <template #reference>
                            <div class="flex items-center pointer">
                                <el-avatar size="small" crossorigin="anonymous" :src="img" />
                                <span style="font-size: 14px; margin-left: 20px">{{ name }}</span>
                                <img src="../assets/image/icon_arrow.png" alt="" />
                            </div>
                        </template>
                    </el-popover>
                </div>
            </el-header>
            <el-container>
                <el-aside v-if="show" class="el-aside">
                    <sideBar @clicked="handleClicked" />
                    <div class="biboc" @click="onToBI" v-if="adminflagc === 2">
                        <img src="../assets/image/bi-icon.png" style="width: 16px;height: 16px;" alt="">
                        <div>超管驾驶舱</div>
                    </div>
                    <!-- <el-menu active-text-color="#0357ff" class="el-menu-vertical-demo" router :unique-opened="true"
            :collapse-transition="true" :default-active="curRouter?.path">
            <template v-for="(ele, index) in menulist" :key="index">
              <el-menu-item v-if="!ele.children?.length" :index="ele.path"
                @click="cgangel_tab(ele.meta.title, ele.path, ele)">
                <img crossorigin="anonymous" :src="getAssetUrl(ele.meta.title + '-active')"
                  style="width: 16px; margin-right: 8px; margin-left: 4px" alt=""
                  v-show="ele.meta.title === activeMenu" />
                <img crossorigin="anonymous" :src="getAssetUrl(ele.meta.title)" style="width: 16px; margin-right: 8px; margin-left: 4px" alt=""
                  v-show="ele.meta.title !== activeMenu" />
                <span>{{ ele.meta.title }}</span>
              </el-menu-item>
              <el-sub-menu v-else :class="{ submenuactive: submenuflag === index }" @click="changesubmenu(index)"
                :index="ele.meta.title">
                <template #title>
                  <img crossorigin="anonymous" :src="getAssetUrl(ele.meta.title + '-active')"
                    style="width: 16px; margin-right: 8px; margin-left: 4px" alt=""
                    v-show="ele.meta.title === activeMenu" />
                  <img crossorigin="anonymous" :src="getAssetUrl(ele.meta.title)" style="width: 16px; margin-right: 8px; margin-left: 4px" alt=""
                    v-show="ele.meta.title !== activeMenu" />
                  <span>{{ ele.meta.title }}</span>
                </template>
                <el-menu-item v-for="(item, i) in ele.children" :key="i" v-if="ele.children"
                  :class="{ active: tabflag === item.meta.title }"
                  @click="cgangel_tab(item.meta.title, '/' + item.path, ele)" :index="item.path"> {{ item.meta.title
                  }}</el-menu-item>
                <el-sub-menu :index="item.meta.title" v-else v-for="(item, i) in ele.children">
                  <template #title>{{ item.meta.title }}</template>
                  <el-menu-item :index="j.path" v-for="(j, k) in item.children">{{ j.meta.title }}</el-menu-item>
                </el-sub-menu>
              </el-sub-menu>
            </template>
          </el-menu> -->
                </el-aside>
                <el-main>
                    <!-- <transition name="router_animate">
            <router-view></router-view>
          </transition> -->
                    <!-- <router-view v-slot="{ Component }">
            <transition name="router_animate">
              <keep-alive >
                <component :is="Component" />
              </keep-alive>
            </transition>
          </router-view> -->
                    <mainApp />
                </el-main>
            </el-container>
        </el-container>
        <changePassword v-model:show="showChangePassword"></changePassword>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onActivated, getCurrentInstance } from 'vue'
import { useRouter, useRoute, onBeforeRouteUpdate } from 'vue-router'
import { getrouter, getuserinfoapi } from '../api/api'
import { wait } from '../utils/utils'
import { useStore } from '../store/index'
import { useRouterStore } from '../store/routerInfo/index'
import navView from '@/components/layout/navView.vue'
import sideBar from '@/components/layout/sideBar.vue'
import mainApp from '@/components/layout/mainApp.vue'
import changePassword from '@/views/changePassword/changePassword.vue'

const store = useStore()
const routerStore = useRouterStore()
const changepassword = () => {
    console.log(111111)
    showChangePassword.value = true
}
const showChangePassword = ref(false)
const {
    appContext: {
        app: {
            config: { globalProperties }
        }
    }
} = getCurrentInstance()
// 自定义指令
// const vFocus = {
//   // 在绑定元素的 attribute 前
//   // 或事件监听器应用前调用
//   created(el: any, binding: any) {
//     console.log(111);
//     console.log(el);
//     console.log(binding);
//   },
//   // 在元素被插入到 DOM 前调用
//   beforeMount() {},
//   // 在绑定元素的父组件
//   // 及他自己的所有子节点都挂载完成后调用
//   mounted() {},
//   // 绑定元素的父组件更新前调用
//   beforeUpdate() {},
//   // 在绑定元素的父组件
//   // 及他自己的所有子节点都更新后调用
//   updated() {},
//   // 绑定元素的父组件卸载前调用
//   beforeUnmount() {},
//   // 绑定元素的父组件卸载后调用
//   unmounted() {},
// };

const activeMenu = ref('')

const submenuflag = ref(1)
const changesubmenu = (i: number) => {
    submenuflag.value = i
}
const router = useRouter()
const route = useRoute()
const curRouter = ref({})
const onToBI = () => {
    router.push({ path: '/visualization' })
}
// 点击logo去首页
const toindex = () => {
    router.push({ path: '/' })
}
// 声明左侧菜单栏数据
const menulist = ref<any>([])
// 进入页面就加在左侧菜单栏
onMounted(() => {
    // getrouter().then((res) => {
    //   // if (res?.length) {
    //   //   res.forEach(i => {
    //   //     if (i.children) {
    //   //       i.children.forEach(route => {
    //   //         route.component = route.path
    //   //       })
    //   //     }
    //   //     router.addRoute(i.path, i)
    //   //   })
    //   // }

    //   // console.log(212121, router);
    //   // menulist.value = res;
    //   // routerStore.addRouterInfo(res)

    //   // menulist.value.unshift({
    //   //   name: "Dashboard",
    //   //   path: "dashboard",
    //   //   hidden: false,
    //   //   redirect: "noRedirect",
    //   //   component: "Layout",
    //   //   alwaysShow: true,
    //   //   meta: {
    //   //     title: "数据表盘",
    //   //     icon: "#",
    //   //     noCache: false,
    //   //     remark: "数据表盘"
    //   //   },
    //   //   children: [
    //   //     {
    //   //       name: "DashboardSassPay",
    //   //       path: "dashboardSassPay",
    //   //       hidden: false,
    //   //       redirect: "noRedirect",
    //   //       component: "Layout",
    //   //       alwaysShow: true,
    //   //       meta: {
    //   //         title: "子弹发薪",
    //   //         icon: "#",
    //   //         noCache: false,
    //   //         remark: "子弹发薪"
    //   //       },
    //   //     },
    //   //     {
    //   //       name: "DashboardPeriodInsure",
    //   //       path: "dashboardPeriodInsure",
    //   //       hidden: false,
    //   //       redirect: "noRedirect",
    //   //       component: "Layout",
    //   //       alwaysShow: true,
    //   //       meta: {
    //   //         title: "长期保",
    //   //         icon: "#",
    //   //         noCache: false,
    //   //         remark: "长期保"
    //   //       },
    //   //     },
    //   //     {
    //   //       name: "DashboardWeInsure",
    //   //       path: "dashboardWeInsure",
    //   //       hidden: false,
    //   //       redirect: "noRedirect",
    //   //       component: "Layout",
    //   //       alwaysShow: true,
    //   //       meta: {
    //   //         title: "日日保",
    //   //         icon: "#",
    //   //         noCache: false,
    //   //         remark: "日日保"
    //   //       },
    //   //     },
    //   //     {
    //   //       name: "DashboardGroupInsure",
    //   //       path: "dashboardGroupInsure",
    //   //       hidden: false,
    //   //       redirect: "noRedirect",
    //   //       component: "Layout",
    //   //       alwaysShow: true,
    //   //       meta: {
    //   //         title: "团意保",
    //   //         icon: "#",
    //   //         noCache: false,
    //   //         remark: "团意保"
    //   //       },
    //   //     },
    //   //     {
    //   //       name: "DashboardEleSign",
    //   //       path: "dashboardEleSign",
    //   //       hidden: false,
    //   //       redirect: "noRedirect",
    //   //       component: "Layout",
    //   //       alwaysShow: true,
    //   //       meta: {
    //   //         title: "电子签",
    //   //         icon: "#",
    //   //         noCache: false,
    //   //         remark: "电子签"
    //   //       },
    //   //     },
    //   //   ]
    //   // })

    //   // menulist.value.unshift({
    //   //   name: "index",
    //   //   path: "/",
    //   //   hidden: false,
    //   //   redirect: "noRedirect",
    //   //   component: "Layout",
    //   //   alwaysShow: true,
    //   //   meta: {
    //   //     title: "首页",
    //   //     icon: "#",
    //   //     noCache: false,
    //   //     remark: "首页"
    //   //   },
    //   // })

    //   // menulist.value.push({
    //   //   name: "Team",
    //   //   path: "team",
    //   //   hidden: false,
    //   //   redirect: "noRedirect",
    //   //   component: "Layout",
    //   //   alwaysShow: true,
    //   //   meta: {
    //   //     title: "团队",
    //   //     icon: "#",
    //   //     noCache: false,
    //   //     remark: "数据表盘"
    //   //   },
    //   //   children: [
    //   //     {
    //   //       name: "TeamTarget",
    //   //       path: "teamtarget",
    //   //       hidden: false,
    //   //       redirect: "noRedirect",
    //   //       component: "Layout",
    //   //       alwaysShow: true,
    //   //       meta: {
    //   //         title: "目标",
    //   //         icon: "#",
    //   //         noCache: false,
    //   //         remark: "目标"
    //   //       },
    //   //     },
    //   //     {
    //   //       name: "Rankinglist",
    //   //       path: "rankinglist",
    //   //       hidden: false,
    //   //       redirect: "noRedirect",
    //   //       component: "Layout",
    //   //       alwaysShow: true,
    //   //       meta: {
    //   //         title: "排名",
    //   //         icon: "#",
    //   //         noCache: false,
    //   //         remark: "排名"
    //   //       },
    //   //     },
    //   //   ]
    //   // })

    //   // const currentRoute = menulist.value.find((i: any) => {
    //   //   if (i.children && i.children.length) {
    //   //     const cur = i.children.find((j: any) => {
    //   //       return ('/' + j.path) === route.path
    //   //     })
    //   //     if (cur) {
    //   //       curRouter.value = cur
    //   //       return i
    //   //     }
    //   //   }
    //   // })

    //   // if (currentRoute) {
    //   //   activeMenu.value = currentRoute.meta.title
    //   // }
    //   setCurRouter(route)
    // });
    getuserinfoapi().then((res: any) => {
        img.value = res.user.avatar
        name.value = res.user.nickName
        store.setButtonPremission(res.permissions)
        sessionStorage.setItem('userid', res.user.userId)
        sessionStorage.setItem('img', res.user.avatar)
        sessionStorage.setItem('name', res.user.nickName)
        sessionStorage.setItem('isGrpLead', res.user.isGrpLead)
        sessionStorage.setItem('isSupPcAdmin', res.user.isSupPcAdmin)
        sessionStorage.setItem('deptId', res.user.deptId)
        let adminflag: any = null
        if (res.user.isGrpLead === 1 && res.user.isSupPcAdmin === 0) {
            adminflag = 1
            adminflagc.value = 1
        }
        if (res.user.isGrpLead === 0 && res.user.isSupPcAdmin === 1) {
            adminflag = 2
            adminflagc.value = 2
        }
        if (res.user.isGrpLead === 1 && res.user.isSupPcAdmin === 1) {
            adminflag = 2
            adminflagc.value = 2
        }
        globalProperties.roleflag = adminflag
    })
})
const adminflagc = ref(1)
onActivated(() => {
    // getrouter().then((res) => {
    //   // if (res?.length) {
    //   //   res.forEach(i => {
    //   //     if (i.children) {
    //   //       i.children.forEach(route => {
    //   //         route.component = route.path
    //   //       })
    //   //     }
    //   //     router.addRoute(i.path, i)
    //   //   })
    //   // }

    //   // console.log(212121, router);
    //   // menulist.value = res;
    //   // routerStore.addRouterInfo(res)

    //   // menulist.value.unshift({
    //   //   name: "Dashboard",
    //   //   path: "dashboard",
    //   //   hidden: false,
    //   //   redirect: "noRedirect",
    //   //   component: "Layout",
    //   //   alwaysShow: true,
    //   //   meta: {
    //   //     title: "数据表盘",
    //   //     icon: "#",
    //   //     noCache: false,
    //   //     remark: "数据表盘"
    //   //   },
    //   //   children: [
    //   //     {
    //   //       name: "DashboardSassPay",
    //   //       path: "dashboardSassPay",
    //   //       hidden: false,
    //   //       redirect: "noRedirect",
    //   //       component: "Layout",
    //   //       alwaysShow: true,
    //   //       meta: {
    //   //         title: "子弹发薪",
    //   //         icon: "#",
    //   //         noCache: false,
    //   //         remark: "子弹发薪"
    //   //       },
    //   //     },
    //   //     {
    //   //       name: "DashboardPeriodInsure",
    //   //       path: "dashboardPeriodInsure",
    //   //       hidden: false,
    //   //       redirect: "noRedirect",
    //   //       component: "Layout",
    //   //       alwaysShow: true,
    //   //       meta: {
    //   //         title: "长期保",
    //   //         icon: "#",
    //   //         noCache: false,
    //   //         remark: "长期保"
    //   //       },
    //   //     },
    //   //     {
    //   //       name: "DashboardWeInsure",
    //   //       path: "dashboardWeInsure",
    //   //       hidden: false,
    //   //       redirect: "noRedirect",
    //   //       component: "Layout",
    //   //       alwaysShow: true,
    //   //       meta: {
    //   //         title: "日日保",
    //   //         icon: "#",
    //   //         noCache: false,
    //   //         remark: "日日保"
    //   //       },
    //   //     },
    //   //     {
    //   //       name: "DashboardGroupInsure",
    //   //       path: "dashboardGroupInsure",
    //   //       hidden: false,
    //   //       redirect: "noRedirect",
    //   //       component: "Layout",
    //   //       alwaysShow: true,
    //   //       meta: {
    //   //         title: "团意保",
    //   //         icon: "#",
    //   //         noCache: false,
    //   //         remark: "团意保"
    //   //       },
    //   //     },
    //   //     {
    //   //       name: "DashboardEleSign",
    //   //       path: "dashboardEleSign",
    //   //       hidden: false,
    //   //       redirect: "noRedirect",
    //   //       component: "Layout",
    //   //       alwaysShow: true,
    //   //       meta: {
    //   //         title: "电子签",
    //   //         icon: "#",
    //   //         noCache: false,
    //   //         remark: "电子签"
    //   //       },
    //   //     },
    //   //   ]
    //   // })

    //   // menulist.value.unshift({
    //   //   name: "index",
    //   //   path: "/",
    //   //   hidden: false,
    //   //   redirect: "noRedirect",
    //   //   component: "Layout",
    //   //   alwaysShow: true,
    //   //   meta: {
    //   //     title: "首页",
    //   //     icon: "#",
    //   //     noCache: false,
    //   //     remark: "首页"
    //   //   },
    //   // })

    //   // menulist.value.push({
    //   //   name: "Team",
    //   //   path: "team",
    //   //   hidden: false,
    //   //   redirect: "noRedirect",
    //   //   component: "Layout",
    //   //   alwaysShow: true,
    //   //   meta: {
    //   //     title: "团队",
    //   //     icon: "#",
    //   //     noCache: false,
    //   //     remark: "数据表盘"
    //   //   },
    //   //   children: [
    //   //     {
    //   //       name: "TeamTarget",
    //   //       path: "teamtarget",
    //   //       hidden: false,
    //   //       redirect: "noRedirect",
    //   //       component: "Layout",
    //   //       alwaysShow: true,
    //   //       meta: {
    //   //         title: "目标",
    //   //         icon: "#",
    //   //         noCache: false,
    //   //         remark: "目标"
    //   //       },
    //   //     },
    //   //     {
    //   //       name: "Rankinglist",
    //   //       path: "rankinglist",
    //   //       hidden: false,
    //   //       redirect: "noRedirect",
    //   //       component: "Layout",
    //   //       alwaysShow: true,
    //   //       meta: {
    //   //         title: "排名",
    //   //         icon: "#",
    //   //         noCache: false,
    //   //         remark: "排名"
    //   //       },
    //   //     },
    //   //   ]
    //   // })

    //   // const currentRoute = menulist.value.find((i: any) => {
    //   //   if (i.children && i.children.length) {
    //   //     const cur = i.children.find((j: any) => {
    //   //       return ('/' + j.path) === route.path
    //   //     })
    //   //     if (cur) {
    //   //       curRouter.value = cur
    //   //       return i
    //   //     }
    //   //   }
    //   // })

    //   // if (currentRoute) {
    //   //   activeMenu.value = currentRoute.meta.title
    //   // }
    //   setCurRouter(route)
    // });
    getuserinfoapi().then((res: any) => {
        img.value = res.user.avatar
        name.value = res.user.nickName
        store.setButtonPremission(res.permissions)
        sessionStorage.setItem('userid', res.user.userId)
        sessionStorage.setItem('img', res.user.avatar)
        sessionStorage.setItem('name', res.user.nickName)
        sessionStorage.setItem('isGrpLead', res.user.isGrpLead)
        sessionStorage.setItem('isSupPcAdmin', res.user.isSupPcAdmin)
        sessionStorage.setItem('deptId', res.user.deptId)
        let adminflag: any = null
        if (res.user.isGrpLead === 1 && res.user.isSupPcAdmin === 0) {
            adminflag = 1
            adminflagc.value = 1
        }
        if (res.user.isGrpLead === 0 && res.user.isSupPcAdmin === 1) {
            adminflag = 2
            adminflagc.value = 2
        }
        if (res.user.isGrpLead === 1 && res.user.isSupPcAdmin === 1) {
            adminflag = 2
            adminflagc.value = 2
        }
        globalProperties.roleflag = adminflag
    })
})
const setCurRouter = (curRoute: any) => {
    const currentRoute = menulist.value.find((i: any) => {
        if (i.children && i.children.length) {
            const cur = i.children.find((j: any) => {
                return '/' + j.path === curRoute.path
            })
            if (cur) {
                curRouter.value = cur
                return i
            }
        }
    })

    if (currentRoute) {
        activeMenu.value = currentRoute.meta.title
    }
}

const img = ref<any>('')
const name = ref<any>('')
// 关闭tag标签
const handleClose = (i: number) => {
    tags.value.splice(i, 1)
    if (tags.value.length != 0) {
        router.push({ path: tags.value[tags.value.length - 1].path })
        tagsflag.value = tags.value.length - 1
    } else {
        return
    }
}
const tags = ref<any[]>([])
// 退出登录
const exit = () => {
    console.log('退出登录并跳转登录页面')
    sessionStorage.removeItem('token')
    sessionStorage.removeItem('userid')
    // localStorage.clear()
    sessionStorage.clear()
    router.push({ path: '/login' })
}
// 跳转到个人信息页面
const tomsg = () => {
    router.push('/personalmsg')
}
const tabflag = ref('')
const iconflag1 = ref(false)
const iconflag2 = ref(false)
const iconflag3 = ref(false)
const iconflag4 = ref(false)
const iconflag5 = ref(false)
// menu菜单切换，动态添加类名，并且添加tag标签
const cgangel_tab = (val: string, path: string, ele: any) => {
    // console.log(2121, val, path, ele);
    activeMenu.value = ele.meta.title
    // console.log(1111, ele);
    if (val === '员工工资单' || val === '保司对账') {
        iconflag1.value = true
        iconflag2.value = false
        iconflag3.value = false
        iconflag4.value = false
        iconflag5.value = false
    } else if (val === '客户管理' || val === '充值/续费管理') {
        iconflag1.value = false
        iconflag2.value = true
        iconflag3.value = false
        iconflag4.value = false
        iconflag5.value = false
    } else if (val === '人员设置') {
        iconflag1.value = false
        iconflag2.value = false
        iconflag3.value = true
        iconflag4.value = false
        iconflag5.value = false
    } else if (
        val === '保险数据看板' ||
        val === '理赔率看板' ||
        val === '黑名单' ||
        val === '收款账户'
    ) {
        iconflag1.value = false
        iconflag2.value = false
        iconflag3.value = false
        iconflag4.value = true
        iconflag5.value = false
    } else if (val === '长期保设置' || val === '日保设置') {
        iconflag1.value = false
        iconflag2.value = false
        iconflag3.value = false
        iconflag4.value = false
        iconflag5.value = true
    }
    tabflag.value = val
    var flag = tags.value.findIndex((ele, index) => {
        return ele.name === val
    })
    if (flag === -1) {
        tags.value.push({ name: val, path: path })
        tagsflag.value = tags.value.length - 1
    } else {
        tagsflag.value = flag
    }
}
const tagsflag = ref(0)
// 点击头部tag标签跳转对应页面
const totagpath = (path: string, i: number) => {
    tagsflag.value = i
    router.push(path)
}

const handleClick = () => {
    console.log(1111)
}

const getAssetUrl = (imgName: string) => {
    return new URL(`../assets/image/menu/${imgName}.png`, import.meta.url).href
}

const isMobile = () => {
    if (window.navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
        return true // 移动端
    } else {
        return false // PC端
    }
}

onBeforeRouteUpdate((to, from) => {
    setCurRouter(to)
})
const show = ref(false)
if (!isMobile()) {
    show.value = true
}

(window as any).isMobile = isMobile()
const toggleShow = () => {
    console.log(12, show.value)
    show.value = !show.value
    console.log(22, show.value)
}
const handleClicked = () => {
    if (isMobile()) {
        setTimeout(() => {
            show.value = false
        }, 0)
    }
}
</script>

<style lang="scss" scoped>
.header_msg {
    margin: 20px 0 20px 0;
    cursor: pointer;
}

.header_msg:hover {
    color: rgba(62, 95, 245, 1);
}

.header_icon:hover {
    cursor: pointer;
}

.submenuactive {
    background-color: #f6f8ff;
}

.el-header {
    background-color: rgba(255, 255, 255, 1);
    color: #333;
    width: 100vw;
    height: 5vh;
    min-height: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    img {
        margin-left: 10px;
        height: 80%;
    }

    .tag {
        height: 32px;
        flex: 1;
        padding-left: 40px;
        display: flex;
        overflow-x: scroll;

        .tagitem {
            height: 100%;
            box-sizing: border-box;
            cursor: pointer;
            font-size: 14px;
            min-width: 130px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: start;
            color: #9497b1;
            padding: 8px 10px;
            border-radius: 4px;
            border: 1px solid #ffffff;

            .icon {
                margin-left: 10px;
            }

            .icon:hover {
                background-color: #dcdcdd;
                border-radius: 50%;
            }

            .icon:active {
                background-color: #c6c6ca;
                border-radius: 50%;
            }
        }

        .tagitem:hover {
            background-color: #fafafc;
            border: 1px solid #9eaffa;
        }
    }

    .adminmsg {
        flex-shrink: 0;
        margin-left: 20px;
        width: 150px;
        padding-right: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}

.tagitem {
    height: 100%;
    box-sizing: border-box;
    cursor: pointer;
    font-size: 14px;
    min-width: 130px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #9497b1;
    padding: 8px 10px;
    border-radius: 4px;
    border: 1px solid #ffffff;

    .icon {
        margin-left: 10px;
    }

    .icon:hover {
        background-color: #dcdcdd;
        border-radius: 50%;
    }

    .icon:active {
        background-color: #c6c6ca;
        border-radius: 50%;
    }
}

.tagitem:hover {
    background-color: #fafafc;
    border: 1px solid #9eaffa;
}

.tagactive {
    background-color: #ebeffe;
    color: #0256ff !important;
}

.el-aside {
    scrollbar-width: none;
    /* Firefox */
    padding-top: 40px;
    padding-bottom: 100px;
    background-color: rgba(255, 255, 255, 1);
    color: #333;
    width: 10vw;
    min-width: 200px;
    height: 95vh;
    position: relative;

    ::-webkit-scrollbar {
        display: none;
        /* Chrome Safari */
    }
}

.biboc {
    cursor: pointer;
    font-size: 14px;
    color: #565868;
    bottom: 0;
    left: 0;
    background-color: #FFFFFF;
    height: 70px;
    width: 10vw;
    min-width: 200px;
    position: fixed;
    display: flex;
    align-items: center;
    gap: 12px;
    box-sizing: border-box;
    padding-left: 22px;
    border-top: 2px solid #EAEAEF;
}

.el-main {
    background-color: rgba(244, 244, 247, 1);
    width: 90vw;
    height: 95vh;
    padding: 0px !important;
    overflow-y: scroll;
}

.el-sub-menu .el-menu-item {
    margin-left: 30px;
    border-left: 2px solid rgba(234, 234, 239, 1);
    // background-color: red;
}

.active {
    border-left: 2px solid rgba(158, 175, 250, 1);
}

.crmlogo {
    cursor: pointer;
    margin-top: 10px;
    margin-right: 80px;
    width: 91px;
    height: 20px !important;
}

.scrollbar-flex-content {
    display: flex;
}

.scrollbar-demo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: start;
    width: 100px;
    height: 50px;
    margin: 10px;
    text-align: center;
    border-radius: 4px;
    background: var(--el-color-danger-light-9);
    color: var(--el-color-danger);
}

:deep(.el-table td.el-table__cell) {
    // border: none;
}
</style>
